<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		li{
			width: 400px;

		}
		span{
			display:inline-block;
			margin-left: 100px;
		}
	</style>
</head>
<body>
	<input type="text" class="num">
	<input type="button" value="添加" class="dian">
	<ul id="list">
		<li>万斯 <span class="APP">&nbsp删除</span></li>
		<li>匡威 <span class="APP">&nbsp删除</span></li>
		<li>新百伦 <span class="APP">删除</span></li>
		<li>三叶草 <span class="APP">删除</span></li>
		<li>耐克 <span class="APP">&nbsp删除</span></li>
	</ul>
	<script src="../JQuery/jquery-1.11.1.js"></script>
	<script>
		$(".dian").click(function(){
			var NUM =$(".num").val()
			console.log(NUM)
			var LI= "<li>" + NUM + "<span class='APP'> 删除 </span></li>" 
			$("#list").append(LI)
			

			})
		//$("span").click(function(){
		//	$(this).parent().remove()
		//})
		$("#list").click(function(event){
			var eve= event.target;
			console.log(eve);
			if (eve.className =="APP") {
				document.getElementById("list").removeChild(eve.parentNode)
			}
		})
	</script>
</body>
</html>